<template>
<div class="bh-rate">
	<span class="bh-rate__item" v-for="(item, key) in max" :key="key"
		:style="{ cursor: rateDisabled ? 'auto' : 'pointer' }"
		@mousemove="setCurrentValue(item, $event)"
		@mouseleave="resetCurrentValue"
		@click="selectValue(item)">
		<i :class="[classes[item - 1]]" class="bh-rate__icon" :style="getIconStyle(item)"></i>
	</span>
	<span v-if="showText || showScore" class="bh-rate__text" :style="{ color: textColor }">{{ text }}</span>
</div>
</template>

<script>
export default {
	name: 'bh-rate',
	props: {
		value: {
			type: Number,
			default: 0
		},
		//低分段临界值
		lowThreshold: {
			type: Number,
			default: 2
		},
		//高分段临界值
		highThreshold: {
			type: Number,
			default: 4
		},
		//低,中,高 3种色
		colors: {
			type: Array,
			default() {
				return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
			}
		},
		//低,中,高 3种图标
		iconClasses: {
			type: Array,
			default() {
				return ['bh-icon-star-on', 'bh-icon-star-on', 'bh-icon-star-on'];
			}
		},
		disabled: {
			type: Boolean,
			default: false
		},
		voidColor: {
			type: String,
			default: '#C6D1DE'
		},
		voidIconClass: {
			type: String,
			default: 'bh-icon-star-off'
		},
		max: {
			type: Number,
			default: 5
		},
		showText: {
			type: Boolean,
			default: false
		},
		showScore: {
			type: Boolean,
			default: false
		},
		textColor: {
			type: String,
			default: '#1f2d3d'
		},
		texts: {
			type: Array,
			default() {
				return ['极差', '失望', '一般', '满意', '惊喜'];
			}
		},
	},
	data () {
		return {
			currentValue: this.value,
		};
	},
	computed: {
		text() {
			let result = '';
			if(this.showScore) {
				result = this.value;
			}else {
				result = this.texts[this.currentValue - 1];
			}
			return result;
		},
		colorMap() {
			return {
				[this.lowThreshold]: this.colors[0],
				[this.highThreshold]: this.colors[1],
				[this.max]: this.colors[2]
			};
		},
		classMap() {
			return {
				[this.lowThreshold]: this.iconClasses[0],
				[this.highThreshold]: this.iconClasses[1],
				[this.max]: this.iconClasses[2]
			}
		},
		activeClass() {
			return this.getValueFromMap(this.currentValue, this.classMap);
		},
		voidClass() {
			return this.voidIconClass;
		},
		classes() {
			let result = [];
			let i = 0;
			let threshold = this.currentValue;

			for (; i < threshold; i++) {
				result.push(this.activeClass);
			}
			for (; i < this.max; i++) {
				result.push(this.voidClass);
			}

			return result;
		},
		activeColor() {
			return this.getValueFromMap(this.currentValue, this.colorMap);
		},
		rateDisabled() {
			return this.disabled;
		},
    },
	methods: {
		getValueFromMap(value, map) {
			const lowThreshold = this.lowThreshold;
			const highThreshold = this.highThreshold;
			const max = this.max;

			if(value <= lowThreshold) {//低分段
				return map[lowThreshold];
			}else if(value > lowThreshold && value <= highThreshold) {//中分段
				return map[highThreshold];
			}else {//高分段
				return map[max];
			}
		},
		setCurrentValue(item) {
			if (this.rateDisabled) {
				return;
			}
			this.currentValue = item;
		},
		resetCurrentValue() {
			if (this.rateDisabled) {
				return;
			}
			this.currentValue = this.value;
		},
		selectValue(item) {
			if (this.rateDisabled) {
				return;
			}
			this.currentValue = item;
			this.$emit('input', item);
			this.$emit('change', item);
		},
		showDecimalIcon(item) {
			if(this.currentValue < item) {
				return true;
			}
			return false;
		},
		getIconStyle(item) {
			return {
				color: item <= this.currentValue ? this.activeColor : this.voidColor
			};
		},

	},
}
</script>
